<template>
  <div class="footer" style="background: #182C5A; ">
      <b-container style="background: #182C5A;">
          <b-row class="footer-wrapper">
              <div   class="logo">
                  <a href="/">
                    <img class="img-middle" src="/static/img/logo.png" alt="">
                  </a>
              </div>
              <div  class="help-list">

                  <div class="help-title"  @click="gotoRouter(0)" >{{$t('f_gywm')}}</div>

                  <!-- <div class="help-link" @click="gotoRouter('/helpContact')">{{$t('f_jyzx')}}</div>
                  <div class="help-link" @click="gotoRouter('/helpCommerce')">{{$t('f_xtgg')}}</div>
                  <div class="help-link" @click="gotoRouter('/helpCommerce')">{{$t('f_sbsq')}}</div>
                  <div class="help-link" @click="gotoRouter('/helpCommerce')">{{$t('f_khdxz')}}</div> -->
              </div>
              <div  class="help-list">

                  <div class="help-title" @click="gotoRouter(2)">{{$t('f_fwxy')}}</div>

                  <!-- <div class="help-link" @click="gotoRouter('/helpQuestion')">{{$t('f_yhxy')}}</div>
                  <div class="help-link" @click="gotoRouter('/helpNo')">{{$t('f_flsm')}}</div>
                  <div class="help-link" @click="gotoRouter('/helpQuestion')">{{$t('f_apiwd')}}</div>
                  <div class="help-link" @click="gotoRouter('/helpNo')">{{$t('f_jrwm')}}</div> -->
              </div>
              <div  class="help-list">

                  <div class="help-title"  @click="gotoRouter(3)" >{{$t('f_sxfl')}}</div>

                  <!-- <div class="help-link" @click="gotoRouter('/helpCompany')">{{$t('f_kfyx')}}</div>
                  <div class="help-link" @click="gotoRouter('/helpServe')">{{$t('f_swhz')}}</div>
                  <div class="help-link" @click="gotoRouter('/helpCompany')">{{$t('f_mjhz')}}</div>
                  <div class="help-link" @click="gotoRouter('/helpServe')">{{$t('f_ldtj')}}</div> -->
              </div>
               <div  class="help-list">

                  <div class="help-title"  @click="gotoRouter(4)">{{$t('f_bzzx')}}</div>

              </div>
               <div class="help-list">

                  <div class="help-title"  @click="gotoRouter(5)">{{$t('f_lxwm')}}</div>

              </div>

              <div  class="help-list" style="margin-left: 3%;width:14%">
                  <a href="/" class="a1 ">
                    <img class=" img_footr" src="../../assets/img/home/footr1.png" alt="">

                  </a>
                <a href="">
                    <img class=" img_footr" src="../../assets/img/home/footr4.png" alt="">
                  </a>
                  
                  <a href="">
                    <img class=" img_footr" src="../../assets/img/home/footr3.png" alt="">
                  </a>
                  
                  <a href="">
                    <img class=" img_footr" src="../../assets/img/home/footr2.png" alt="">
                  </a>
              </div>

              <div id="text" @click="dibu()"> <img src="/static/img/jiantou1.png" alt=""> </div>
          </b-row>
      </b-container>
      <p class="copy-right">© Copyright 2018 市场有风险，投资需谨慎</p>
  </div>
</template>

<script scoped>

export default {
    name:'ffooter',
  data() {
    return {
        dian:0
    }
  },
  mounted: function () {
        window.addEventListener('scroll', this.handleScroll, true);  // 监听（绑定）滚轮滚动事件
             
      },
  methods:{
    dibu(){//返回顶部
          
          let timer =  setInterval(function(){
          let time = $(document).scrollTop()
          $(document).scrollTop(time-=50)
              if($(document).scrollTop()==0){
                clearInterval(timer);
                console.log(1)
              }   
            },10)
    },
    handleScroll: function () {
            if($(document).scrollTop() > 800){
                 document.getElementById('text').style.display = "block"
            }else{
                 document.getElementById('text').style.display = "none"
            } 
        }
   },
    destroyed: function () {
        window.removeEventListener('scroll', this.handleScroll);   //  离开页面清除（移除）滚轮滚动事件
      }
 
}
</script>

<style lang="scss">
@media screen and (min-width: 1500px) {
   .container {
    max-width: 1500px;
    width: 100%;
  }
}
.img-middle{
    margin-top: 30px;
   
    margin-right: 96px;
     width: 131px;
      height: 34px;
}
.img_footr{
    float: left;
    width:24px;
    height:24px;
    // margin-top: 30px;
    background: rgb(24, 44, 90);
}
.a1{
    margin-top:90px;
}
.a1:hover .img_hover{
    display: block;
}
.footer{
    width: 100%;
    background: rgb(24, 44, 90);
  
}

.footer-wrapper{
    min-height: 204px;
    padding-top: 24px;
    
    .help-list{
        width:9%;
        font-family: NotoSansHans-Medium;
        font-size: 14px;
        color: #C6C6C6;
        letter-spacing: 0;
        a{
            float: left;
            width:24px;
            height:24px;
            margin:0 6px;
            margin-top:40px;
        }
        .a1:hover .chuxin{
                margin-left:10px;
        }
        .help-title{
            cursor:pointer;
            display: inline-block;
            font-size: 14px;
            color: #ffffff;
            line-height: 3;
            border-bottom: 1px solid transparent;
            margin-top: 30px;
            font-family: NotoSansHans-Medium;
            font-size: 14px;
            color: #C6C6C6;
            letter-spacing: 0;
        }
        .help-link{
            cursor: pointer;
            height: 30px;
            line-height: 30px;
            width:250px;
            color: #8a90b4;
            opacity: 0.3;
            font-size: 14px;
            &:hover{
                color: #8a90b4;
                opacity: 0.5;
            }
        }
    }
}
.logo{
        margin-left:10%;
        margin-right: 5%;
    }
.img_hover{
    margin-left: -23px;
    margin-top: 27px;
    display: none;
    border-radius: 4px;
}
.copy-right{

    height: 45px;
    line-height: 44px;
    text-align: center;
    background: #182C5A;
    font-family: NotoSansHans-Light;
    font-size: 10px;
    color: #C6C6C6;
    letter-spacing: 4px;
}
#text{
    display: none;
    position: fixed;
    right:0;
    top:73%;
    width:35px;
    height:35px;
   background: #e9ecef
}
#text img{
    width:100%;
    height: 100%;
}
</style>


